<template>
  <view class="my-card">
    <view class="my-card-container">
      <navigator
        url="/pages/department/department"
        open-type="navigate"
        class="my-card-item"
        v-for="item of list"
        :key="item.id"
      >
        <view class="my-card-item-icon">
          <image
            :src="item.img"
            style="width: 80rpx; height: 80rpx"
            mode="scaleToFill"
          />
          <text class="my-card-item-text">{{ item.name }}</text>
        </view>
      </navigator>
    </view>
  </view>
</template>

<script lang="js" setup>
const list = Array.from({ length: 8 }, (_, i) => ({
  name: `预约挂号`,
  img: `/static/images/0${i + 1}.png`,
  id: i
}))

// defineProps({
//   list: Array
// })
</script>

<style lang="scss" scoped>
.my-card {
  width: 100%;
  background-color: #fff;
  border-radius: 16px;
  overflow: hidden;
  .my-card-container {
    padding: 0 30rpx;
    width: 680rpx;
    margin-right: -50rpx;
  }
  .my-card-item {
    display: inline-block;
    width: 120rpx;
    height: 128rpx;
    margin-right: 50rpx;
    padding-top: 16rpx;
    padding-bottom: 16rpx;

    .my-card-item-icon {
      text-align: center;
    }

    .my-card-item-text {
      color: rgba(51, 51, 51, 1);
      font-size: 28rpx;
      font-weight: 400;
      display: block;
      line-height: 32rpx;
    }
  }
}
</style>
